<template>
  <el-row :gutter="20" class="settings">
    <el-col :span="6">
      <div class="impact_factor setting_item align_center col_height_32">
        <span class="text_size_14 text_color_regular margin-right-10">影响因子</span>
        <div class="input_wrapper">
          <el-input
            v-model="ifStartValue"
            style="width: 52px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.2)"
            @change="handleStartChange"
          ></el-input>
          <span class="divide"></span>
          <el-input
            v-model="ifEndValue"
            @change="handleEndChange"
            style="width: 52px; height: 40px; border: 1px solid rgba(0, 0, 0, 0.2)"
          ></el-input>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="custom_select setting_item align_center col_height_32">
        <span class="text_size_14 text_color_regular margin-right-10">JCR分区</span>
        <el-select v-model="JCRValue" style="width: 80px; border: none" @change="handleJCRChange">
          <el-option v-for="item in JCRList" :key="item.value" :value="item.label" />
        </el-select>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="custom_select setting_item align_center col_height_32">
        <span class="text_size_14 text_color_regular margin-right-10">分区</span>
        <el-select v-model="subValue" style="width: 80px; border: none" @change="handleSubChange">
          <el-option v-for="item in subList" :key="item.value" :value="item.label" />
        </el-select>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="custom_select setting_item align_center col_height_32">
        <span class="text_size_14 text_color_regular margin-right-10">综述占比</span>
        <el-select
          v-model="totalReview"
          style="width: 85px; border: none"
          @change="handleTotalReviewRatioChange"
        >
          <el-option v-for="item in totalReviewRatioList" :key="item.value" :value="item.label" />
        </el-select>
      </div>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, inject } from 'vue'
import { useRoute } from 'vue-router'

const router = useRoute()
const { jcr, sub, totalReviewRatio, ifStart_2019, ifEnd_2019 } = router.query
const jcrChange = inject('handleJCRChange')
const subChange = inject('handleSUBChange')
const totalReviewChange = inject('handleTotalReviewChange')
const ifChange = inject('handleIfChange')
// 影响因子最小值
const ifStartValue = ref(ifStart_2019)
const ifEndValue = ref(ifEnd_2019)
const handleStartChange = (value) => {
  ifStartValue.value = value
  if (ifStartValue.value && ifEndValue.value) {
    ifChange(ifStartValue.value, ifEndValue.value)
  } else if (!ifStartValue.value && !ifEndValue.value) {
    ifChange(ifStartValue.value, ifEndValue.value)
  } else if (ifEndValue.value && !ifStartValue.value) {
    ElMessage.warning('请输入影响因子开始值')
  }
}
const handleEndChange = (value) => {
  ifEndValue.value = value
  if (ifStartValue.value && ifEndValue.value) {
    ifChange(ifStartValue.value, ifEndValue.value)
  } else if (!ifStartValue.value && !ifEndValue.value) {
    ifChange(ifStartValue.value, ifEndValue.value)
  } else if (ifStartValue.value && !ifEndValue.value) {
    ElMessage.warning('请输入影响因子结束值')
  }
}
// JCR分区
const JCRList = ref([
  {
    value: '',
    label: '不限',
  },
  {
    value: '8',
    label: 'Q1',
  },
  {
    value: '4',
    label: 'Q2',
  },
  {
    value: '2',
    label: 'Q3',
  },
  {
    value: '1',
    label: 'Q4',
  },
])
const getJCRLabel = (value) => {
  const item = JCRList.value.find((item) => item.value === value)
  return item ? item.label : '不限'
}
const JCRValue = ref(getJCRLabel(jcr))
const handleJCRChange = (label) => {
  JCRList.value.forEach((item) => {
    if (item.label === label) {
      jcrChange(item.value)
    }
  })
}
// 国内分区
const subList = ref([
  {
    value: '',
    label: '不限',
  },
  {
    value: '1',
    label: '1区',
  },
  {
    value: '2',
    label: '2区',
  },
  {
    value: '3',
    label: '3区',
  },
  {
    value: '4',
    label: '4区',
  },
])
const getSubLabel = (value) => {
  const item = subList.value.find((item) => item.value === value)
  return item ? item.label : '不限'
}
const subValue = ref(getSubLabel(sub))
const handleSubChange = (label) => {
  subList.value.forEach((item) => {
    if (item.label === label) {
      subChange(item.value)
    }
  })
}
// 综述占比
const totalReviewRatioList = ref([
  {
    value: '',
    label: '不限',
    trrl: '',
    trrr: '',
  },
  {
    value: '1',
    label: '0~5%',
    trrl: '0',
    trrr: '5',
  },
  {
    value: '2',
    label: '5%~10%',
    trrl: '5',
    trrr: '10',
  },
  {
    value: '3',
    label: '10%~20%',
    trrl: '10',
    trrr: '20',
  },
  {
    value: '4',
    label: '20%~30%',
    trrl: '20',
    trrr: '30',
  },
  {
    value: '5',
    label: '30%~50%',
    trrl: '30',
    trrr: '50',
  },
  {
    value: '6',
    label: '50%以上',
    trrl: '50',
    trrr: '',
  },
])
const getTotalReview = (value) => {
  const item = totalReviewRatioList.value.find((item) => item.value === value)
  return item ? item.label : '不限'
}
const totalReview = ref(getTotalReview(totalReviewRatio))
const handleTotalReviewRatioChange = (label) => {
  totalReviewRatioList.value.forEach((item) => {
    if (item.label === label) {
      totalReviewChange(item.value, item.trrl, item.trrr)
    }
  })
}
totalReviewChange
</script>
<style scoped lang="scss">
.settings {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  width: 100%;
}
.setting_item {
  display: flex;
  align-items: center;
  justify-content: center;
  .input_wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    .divide {
      width: 10px;
      height: 1px;
      background: #dcdfe6;
      margin: 0 5px;
    }
  }
}
</style>
